<!--
 * @Author: chenzhtbb chenzhtbb@163.com
 * @Date: 2023-10-07 09:58:28
 * @LastEditors: chenzhtbb chenzhtbb@163.com
 * @LastEditTime: 2023-10-11 22:49:38
 * @FilePath: /hello-vue3/src/components/2-2-3.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <h1>2.2.3 setup 函数与生命周期</h1>
  <h2>setup</h2>
  <p><n-a href="https://cn.vuejs.org/api/sfc-script-setup.html" target="_blank">setup</n-a> 可以理解为 Vue 组件的入口，类似 C/C++ 中的
    <n-text type="info">main 函数</n-text>
  </p>
  <h2>生命周期</h2>
  <p>仅学习 <n-a href="https://cn.vuejs.org/api/composition-api-lifecycle.html#onmounted" target="_blank">onMounted</n-a>
    钩子，类似 C++ 中类的构造函数，其余<n-a href="https://cn.vuejs.org/guide/essentials/lifecycle.html" target="_blank">生命周期钩子</n-a>可自行学习
  </p>
  <p>运行本例前在浏览器中按下 <n-text type="info">F12</n-text> 打开命令行工具，并切换到 <n-text type="info">console</n-text> 选项卡查看运行结果</p>
  <!-- <n-blockquote>本例及后续例子都将分别给出 <n-text type="info">普通函数</n-text> 形式 和 <n-text type="info">箭头函数</n-text> 形式</n-blockquote> -->
  <n-tabs type="line" animated>
    <n-tab-pane name="fun1" tab="普通函数">
      <n-code word-wrap show-line-numbers language="js" :code="`import { onMounted } from 'vue'

onMounted(function () {
  console.log('Hello function')
}) `" />
      <h3>实验结果</h3>
      <n-image
        src=""></n-image>
    </n-tab-pane>
    <n-tab-pane name="fun2" tab="箭头函数">
      <n-code word-wrap show-line-numbers language="js" :code="`import { onMounted } from 'vue'

onMounted(() => {
  console.log('Hello () => {}')
})`" />
      <h3>实验结果</h3>
      <n-image
        src=""></n-image>
    </n-tab-pane>
  </n-tabs>
</template>

<script setup>
import { onMounted } from 'vue'

defineOptions({
    inheritAttrs: false
})
onMounted(function () {
  console.log('Hello () => {}')
}) 
</script>